<template>
  <div class="user-activity">
    <div class="reading">
      <el-row v-for="(item,index) in reading" :key="index" class="foritem">
        <el-col>
          <el-card shadow="never">
            <div class="bookimg">
              <img class="imgsrc" src="https://cdn2.hemacdn.com/img/5ea75616e256e87d779b3a89ab2c6b3d.jpg">
            </div>
            <div class="bookinfo">
              <div class="bookinfoitem">
                <span class="booktitle">书名：<a>{{ item.bookname }}</a></span>
              </div>
              <div class="bookinfoitem">
                <span class="bookauthor">作者：<a>{{ item.bookauthor }}</a></span>
              </div>
              <div class="bookinfoitem">
                <span class="booknumber">书号：<a>{{ item.booknumber }}</a></span>
              </div>
              <div class="bookinfoitem">
                <span class="bookleft">剩余数量：<a>{{ item.bookleft }}</a></span>
              </div>
            </div>
            <div class="timecontainer">
              <div class="time">
                <span>借书时间：</span>
                <a>{{ item.lenttime }}</a>
              </div>
              <div class="time">
                <span>应还时间：</span>
                <a>{{ item.s_backtime }}</a>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { reading } from '@/api/user'

export default {
  data() {
    return {
      reading: []
    }
  },
  created() {
    this.getReading()
  },
  methods: {
    getReading() {
      reading().then(response => {
        this.reading = response
      }).catch(error => {
        console.log(error)
        this.$message({
          message: '获取正在阅读信息失败！',
          type: 'error'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .reading {
    .foritem{
      border-bottom: 1px solid #d2d6de;
      padding: 15px 0;
    }
    .imgsrc {
      height: 150px;
      width: 105px;
      float: left;
      margin-bottom: 20px;
    }
    .bookinfo {
      display: inline-block;
      margin-left: 15px;
      float: left;
      width: 57%;
    }
    .bookinfoitem{
      padding: 8px 0;
    }
    .time{
      padding: 10px 0;
      text-align: center;
    }
    .timecontainer{
      float: left;
      width: auto;
      display: inline-block;
    }
    span {
      color: #777;
    }
    span a {
      color: black;
    }
  }
</style>
